<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>签到地图</title>
    <style>
        html, body {
            padding: 0px;
            margin: 0px;
        }

        html, body, #container {
            width: 100%;
            height: 100%;
        }

        .anchorBL {
            display: none;
        }

        canvas+div:last-child{
            display: none;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script src="js/common.js"></script>
    <!--引入Javascript API GL，参数说明参见下文-->
    <script src="https://map.qq.com/api/gljs?v=1.exp&key=7MLBZ-Q473F-KURJA-JTM5T-LTME7-GSFCB"></script>
    <script>
        var id = getParam("id");

        //地图初始化函数，本例取名为init，开发者可根据实际情况定义
        function initMap() {

            $.get("signs/" + id, function (result) {
                var sign = result.data;
                var center = new TMap.LatLng(sign.latIn, sign.lngIn);//设置中心点坐标
                var map = new TMap.Map(container, {
                    center,
                    zoom: 18
                });
                var markerLayer = new TMap.MultiMarker({
                    map: map,  //指定地图容器
                    //点标记数据数组
                    geometries: [{
                        "id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
                        "position": center,  //点标记坐标位置
                        "properties": {//自定义属性
                            "title": "签到位置"
                        }
                    }
                    ]
                });
                var label = new TMap.MultiLabel({
                    id: 'label-layer',
                    map: map, //设置折线图层显示到哪个地图实例中
                    //文字标记数据
                    geometries: [{
                        'id': 'label_1', //点图形数据的标志信息
                        'position': center, //标注点位置
                        'content': '签到位置', //标注文本
                    }]
                });
                if (sign.state == 2) {
                    markerLayer.add([{
                        "id": "2",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
                        "position": new TMap.LatLng(sign.latOut, sign.lngOut),  //点标记坐标位置
                        "properties": {//自定义属性
                            "title": "签退位置"
                        }
                    }]);
                    label.add([{
                        'id': 'label_2', //点图形数据的标志信息
                        "position": new TMap.LatLng(sign.latOut, sign.lngOut),  //点标记坐标位置
                        'content': '签退位置', //标注文本
                    }]);
                }

            });

        }
    </script>
</head>
<!-- 页面载入后，调用init函数 -->
<body onload="initMap()">
<!-- 定义地图显示容器 -->
<div id="container"></div>
</body>
</html>